﻿<div [@routerTransition]>
    <div class="m-login__signin">
        <div class="m-login__head">
            <h3 class="m-login__title">
                {{"SignUp" | localize}}
            </h3>
        </div>
        <form #registerForm="ngForm" class="m-login__form" method="post" novalidate (ngSubmit)="save()">
            <div class="form-group m-form__group">
                <input #nameInput="ngModel" class="form-control" autoFocus type="text" placeholder="{{'Name' | localize}} *" [(ngModel)]="model.name" name="Name" required maxlength="32" />
                <validation-messages [formCtrl]="nameInput"></validation-messages>
            </div>

            <div class="form-group m-form__group">
                <input #surnameInput="ngModel" class="form-control" type="text" placeholder="{{'Surname' | localize}} *" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
                <validation-messages [formCtrl]="surnameInput"></validation-messages>
            </div>

            <div class="form-group m-form__group">
                <input #emailAddressInput="ngModel" class="form-control" type="email" placeholder="{{'EmailAddress' | localize}} *" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="256" pattern="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" />
                <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
            </div>

            <div class="form-group m-form__group">
                <input #userNameInput="ngModel" class="form-control" type="text" autocomplete="off" placeholder="{{'UserName' | localize}} *" name="UserName" [(ngModel)]="model.userName" required maxlength="32" />
                <validation-messages [formCtrl]="userNameInput"></validation-messages>
            </div>
            <div class="form-group m-form__group">
                <input type="password" name="Password" class="form-control" [(ngModel)]="model.password" #Password="ngModel" placeholder="{{'Password' | localize}}" validateEqual="PasswordRepeat"
                       reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </div>
            <div [hidden]="registerForm.form.valid || registerForm.form.pristine" class="form-group m-form__group">
                <ul class="help-block text-danger" *ngIf="Password.errors">
                    <li [hidden]="!Password.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                    <li [hidden]="!Password.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                    <li [hidden]="!Password.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                    <li [hidden]="!Password.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                    <li [hidden]="!Password.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                </ul>
            </div>
            <div class="form-group m-form__group">
                <input type="password" name="PasswordRepeat" class="form-control" [ngModel]="model.passwordRepeat" #PasswordRepeat="ngModel" placeholder="{{'PasswordRepeat' | localize}}" validateEqual="Password"
                       reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </div>
            <div [hidden]="registerForm.form.valid || registerForm.form.pristine" class="form-group m-form__group">
                <ul class="help-block text-danger" *ngIf="PasswordRepeat.errors">
                    <li [hidden]="!PasswordRepeat.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                    <li [hidden]="PasswordRepeat.valid">{{"PasswordsDontMatch" | localize}}</li>
                </ul>
            </div>
            <p *ngIf="useCaptcha" class="hint margin-top-20">
                {{"Captha_Hint" | localize}}
            </p>

            <div *ngIf="useCaptcha" class="form-group m--margin-bottom-20">
                <re-captcha #recaptchaRef (resolved)="captchaResolved($event)" [siteKey]="recaptchaSiteKey"></re-captcha>
            </div>

            <div class="m-login__form-action">
                <button [disabled]="saving" routerLink="/account/login" type="button" class="btn btn-outline-primary  m-btn m-btn--pill m-btn--custom"><i class="fa fa-arrow-left"></i> {{"Back" | localize}}</button>
                <button type="submit" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--air" [disabled]="!registerForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-check"></i> {{"Submit" | localize}}</button>
            </div>
        </form>
    </div>
</div>
